<template>
	<view class="points_details">
		<view class="list">
			<view class="item" v-for="(item,index) in integralDetails" :key="index">
				<!-- <text v-if="item.number>0">+{{item.number}}积分</text> -->
				<!-- <text v-else>-{{item.number}}积分</text> -->
				<text style="font-size: 16px;">{{item.integral}}</text>
				<text class="video" v-if="item.video_name">{{item.video_name}}</text>
				<view style="display: flex;justify-content: space-between;">
					<text style="font-size: 13px;color: #999;font-weight: normal;">来源：{{item.origin}}</text>
					<text style="font-size: 13px;color: #999;font-weight: normal;">{{item.date}}</text>
				</view>

				<image src="@/static/image/mine/integral.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'

	export default {
		data() {
			return {
				list: [{
						number: 10,
						source: '商品兑换',
						date: '2021/06/18 09:36'
					},
					{
						number: 10,
						source: '学习视频',
						date: '2021/06/17 09:36'
					},
					{
						number: 20,
						source: '完善信息',
						date: '2021/06/17 09:36'
					},
					{
						number: 50,
						source: '用户注册',
						date: '2021/06/16 09:36'
					}
				],
				integralDetails: []
			}
		},
		onShow() {
			this.getdata()
		},
		mounted() {

		},
		methods: {
			getdata() {
				var uid = JSON.parse(uni.getStorageSync('userInfo')).uid
				var access_token = JSON.parse(uni.getStorageSync('userInfo')).access_token;
				api.pointsDetails(access_token, 'integral.detail', '_api_integral_detail', uid).then(res => {
					this.integralDetails = res.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.points_details {
		padding: 40rpx;

		.list {
			& view:not(:first-child) {
				margin-top: 20rpx;
			}

			.item {
				display: flex;
				flex-direction: column;
				line-height: 40rpx;
				position: relative;
				border: 1px solid #E5E5E5;
				padding: 20rpx;
				color: #999999;

				& text:first-child {
					color: #333;
					font-weight: bold;
				}

				.video {
					font-size: 14px;
					color: #666;
					margin-top: 7rpx;
					line-height: 17px;
					word-break: break-all;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				image {
					width: 32rpx;
					height: 40rpx;
					position: absolute;
					top: 5%;
					right: 4%;
				}
			}
		}
	}
</style>
